<template>
  <section class="bg-white pt-12 pb-40">
    <div class="container mx-auto">
      <div class="flex justify-between" :class="reverse ? 'flex-reverse' : ''">
        <img class="w-[540px] object-contain" :src="imgSrc" alt="" />

        <div class="flex-1">
          <div class="py-24 font-semibold">
            <div class="text-gray-33 text-5xl">
              <slot name="title"></slot>
            </div>
            <div class="py-6 text-gray-66 text-2xl">
              <slot name="subtitle"></slot>
            </div>
          </div>
          <div class="h-12 flex items-center">
            <slot name="button"></slot>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>
  
<script>
export default {
  props: ["img", "reverse"],
  data() {
    return {
      imgSrc: require("@/assets/img/" + this.img + ".png"),
    };
  },
};
</script>
  
<style>
</style>